<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/22
 * Time: 19:00
 */
-->
<template>
  <div class="home">
    <!-- header -->
    <div class="header-wrap">
      <div class="header-box" ondragstart="return false" onselectstart="return false">
        <router-link to="/" class="logo">
          <img id="logo" src="../../assets/img/login-logo.png" alt=""/>
        </router-link>

        <div class="user">
          <el-dropdown class="dropdown" @command="handleCommand">
            <div class="avatar" style="cursor: pointer">
              <div v-if="!$store.state.userData.img">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
              </div>
              <div v-else>
                <el-avatar :src="$store.state.userData.img"></el-avatar>
              </div>
            </div>
            <el-dropdown-menu slot="dropdown" style="text-align: center">
              <template v-if="modelUser.isLogin()">
                <el-dropdown-item disabled>{{ $store.state.userData.tuserName }}</el-dropdown-item>
                <el-dropdown-item v-if="$store.state.userData.role != '0'" command="admin">
                  进入后台
                </el-dropdown-item>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="logout">登出</el-dropdown-item>
              </template>

              <template v-else>
                <el-dropdown-item command="login">登录</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- nav -->
    <div class="nav-wrap">
      <div class="nav-box" id="nav-box">
        <ul>
          <li>
            <router-link
                to="/"
                :class="{ 'active': $route.path == '/' }">
              首页
            </router-link>
          </li>
          <li>
            <router-link
                to="/announcement"
                :class="{ 'active': $route.path.indexOf('/ann') != -1 }">
              通知公告
            </router-link>
          </li>
          <li>
            <router-link
                to="/activity"
                :class="{ 'active': $route.path.indexOf('/act') != -1 }">
              娱乐活动
            </router-link>
          </li>
          <li>
            <router-link
                to="/service"
                :class="{ 'active': $route.path == '/service' }">
              我的服务
            </router-link>
          </li>
          <li>
            <router-link
                to="/comment"
                :class="{ 'active': $route.path == '/comment' }">
              留言
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- container -->
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import modelUser from '@/models/user';

export default {
  name: "MainHome",
  props: {},
  data() {
    return {
      modelUser: modelUser
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    /**
     * DropDown
     *
     * @param command
     */
    handleCommand(command) {
      switch (command) {
        case 'admin':
          this.$router.push('/admin');
          break;
        case 'profile':
          this.$router.push('/profile');
          break;
        case 'logout':
          modelUser.logout();
          break;
        case 'login':
          modelUser.logout();
          break;
      }
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.home {
  // header
  .header-wrap {
    width: 100%;
    background: url(../../assets/img/home/top_bg.png) no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;

    .header-box {
      width: 860px;
      height: 96px;
      overflow: hidden;
      margin: 0 auto;

      .logo {
        float: left;
        width: 372px;
        height: 96px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
        }
      }

      .user {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        float: right;
        margin-top: 48px;

        .dropdown {
          padding-bottom: 8px;
          margin-right: 8px;
        }

        .dropdown-text {
          cursor: pointer;
          font-weight: 600;
        }
      }
    }
  }

  // nav
  .nav-wrap {
    width: 100%;
    background: #02257E;
    height: 57px;

    .nav-box {
      width: 1000px;
      margin: 0 auto;
      height: 57px;

      li {
        float: left;
        position: relative;
        text-align: center;

        &:hover,
        &:focus {
          background: #0b1120;

          a {
            border-bottom: 2px solid #FFF;
            color: #fff;
          }
        }

        a {
          display: block;
          font-size: 18px;
          color: #fff;
          height: 55px;
          line-height: 55px;
          border-bottom: 2px solid transparent;
          padding: 0 30px;

          &.active {
            border-bottom: 2px solid #FFF;
          }
        }
      }
    }
  }

  // container
  .container {
    width: 1000px;
    margin: 0 auto;
    padding: 32px 0 32px;
  }
}
</style>